<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <title>系统登录</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>js/bootstrap-3.3.6/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="<%=basePath%>js/new/jquery.min.js" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/bootstrapValidator.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/mydialog.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css"/>
    <script type="text/javascript" src="<%=basePath%>js/common/jquery-2.1.0.js" charset="utf-8"></script>

    <script type="text/javascript" src="<%=basePath%>js/common/dialog.3.1.min.js"></script>

    <script type="text/javascript" src="<%=basePath%>js/validate/bootstrapValidator.js"></script>

    <style>
        body, ul, li, label {
            margin: 0;
            padding: 0;
        }

        body {
            background: url("./images/background.png") no-repeat 100% 100%;
            -webkit-background-size: 100%;
            background-size: 100%;
        }

        .container {
            margin-left: 35%;
            margin-right: 10%;
            margin-bottom: 5%;
            width: 35%;
            height: 40%;
            background-color: #fff;
            border-radius: 20px;

        }

        .back-logo {
            padding-top: 3%;
            text-align: center;
        }

        ul {
            position: relative;
        }

        li {
            list-style: none;
            height: 35px;
            line-height: 35px;
            width: 70%;
            border: 0.55px solid #ccc;
            padding: 5px 10px;
            margin: 20px 15%;
            border-radius: 5px;
        }

        li img {
            display: inline-block;
            width: 25px;
            height: 30px;
            vertical-align: middle;
        }

        li input {
            border: none;
            -webkit-appearance: none;
            appearance: none;
            display: inline-block;
            height: 35px;
            line-height: 35px;
            width: 80%;
            margin-left: 5%;
        }

        #code-input {
            width: 40%;
        }

        span {
            position: absolute;
            top: 75%;
            right: 10%;
            background-color: #efefef;
            border-radius: 5px;
            width: 27%;
            height: 45px;
            line-height: 45px;
            text-align: center;
        }

    </style>
    <script type="text/javascript">
        function checkDatas() {
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            var code = $("#code").val();
            if (username == "") {

                return false;
            } else if (password == "") {

                return false;

            } else if (code == "") {

                return false;
            } else {
                return true;
            }
        }

        function login() {
            if (checkDatas()) {
                var form = document.getElementById("loginForm");
                form.method = "post";
                form.action = "checkLogin";
                form.submit();
            }
        }

        /* 登录不成功提示淡出 */
        $(document).ready(function () {
            changeCode();
            $("div").children("div").find("input").first().focus(function () {
                $("#userFadeOut").fadeOut();
            })
            $("div").find("div").find("input").last().focus(function () {
                $("#pwdFadeOut").fadeOut();
            })
        });

        function chckeSystem() {
            var username = $("#username").val();
            var email = $("#email").val();
            if (username == "") {
                alert("用户账号不能为空！");
                return;
            } else if (email == "") {
                alert("用户邮箱不能为空！");
                return;
            }

            var datas = {
                "username": username,
                "email": email
            };
            $("#sendemail").attr({disabled: "disabled"});
            $('#loading').modal('show');
            $.ajax({
                url: '<%=path%>/findPassword',
                data: datas,
                type: 'post',
                cache: false,
                async: false,
                success: function (data) {
                    var infoss = data.infoss;
                    $('#loading').modal('hide');
                    $("#sendemail").attr({"disabled": false});
                    if (infoss == 1) {
                        $("#infos").text("该用户已禁用");
                        $("#errorUsername").text("");
                        $("#errorEmail").text("");
                    }
                    else if (infoss == 2) {
                        $("#infos").text("");
                        $("#errorUsername").text("");
                        $("#errorEmail").text("用户邮箱与注册邮箱不一致!");
                    }
                    else if (infoss == 3) {
                        $("#infos").text("");
                        $("#errorUsername").text("用户不存在!");
                        $("#errorEmail").text("");
                    }
                    else if (infoss == 4) {
                        $("#infos").text("邮箱发送成功!请注意查收您的邮件!");
                        $("#errorUsername").text("");
                        $("#errorEmail").text("");
                        $("#sendemail").hide();
                    } else {
                        $("#infos").css("color", "red");
                        $("#infos").text("发送出错!");
                        $("#errorUsername").text("");
                        $("#errorEmail").text("");
                    }
                },
                error: function (data) {
                    alert("发送出错!");
                }
            });
        }

        function changeCode() {
            $("#imgObj").attr("src", "<%=path%>/verifcationCode?timestamp=" + (new Date()).valueOf());
        }
    </script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?43e3b466a7accb875cd64b971a9b48f0";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body class="login-page" onkeydown="if(event.keyCode==13){login();}">
<form id="loginForm" method="post" onsubmit="return login()">
    <div id="header-box">
    </div>
    <div id="login-img-box">

    </div>
    <div style="height: 100px;"></div>
    <div class="container">
        <div class="back-logo"><img src="./images/logo.png" alt=""></div>

        <div style="height: 45px;">
            <div id="userFadeOut"
                 style="height: 45px;border: 0px solid red;color: red;font-size: 14px;text-align: center;margin: auto;line-height:45px;">
                <b><c:if test="${error!=null }">${error }</c:if>
                </b>
                <b><c:if test="${error1!=null }">${error1 }</c:if>
                </b>
            </div>
        </div>

        <div class="form-group " style="border: 0px solid red;width:250px;margin:auto;">

            <div class="input-group" style="width:250px;">
                <%--<div class="input-group-addon">--%>
                    <%--<i class="fa fa-user"><img src="./images/user.png" alt="" style="height: 15px;"></i>--%>
                <%--</div>--%>
                <input type="text" class="form-control" name="username" placeholder="请输入登录用户名" maxlength="16"
                       value="${username }"/>
            </div>
        </div>

        <div class="form-group" style="border: 0px solid red;width:250px;margin:10px auto;">
            <div class="input-group" style="width:250px;">
                <%--<div class="input-group-addon">--%>
                    <%--<i class="fa fa-key"><img src="./images/pwd.png" alt="" style="height: 15px;"></i>--%>
                <%--</div>--%>
                <input type="password" class="form-control" name="password" placeholder="请输入登录密码" onkeyup=""
                       maxlength="16" value="${passw }"/>
            </div>
        </div>
        <div class="form-group" style="width:250px;margin:10px auto;">
            <div style="text-align: left;">
                <input class="form-control" style="left:98px;width:120px;display:inline;" type="text"
                       placeholder="验证码" id="code" name="code" maxlength="4"/>
                <img id="imgObj" style="" alt="验证码"
                     src="<%=request.getContextPath()%>/verifcationCode?timestamp=1482298006243" onclick="changeCode()">
            </div>
        </div>
        <div class="form-group" style="border: 0px solid red;width:250px;margin:10px auto;">
            <button type="submit" class="btn btn-info btn-block btn-login">
                <i class="fa fa-sign-in"></i>
                登 录
            </button>
            <div style="margin-top: 15px;margin-bottom:10px;float: right;">
                <a style="cursor: pointer;"
                   data-toggle="modal"
                   data-target="#myModalAdd">
                    忘记密码？
                </a>
            </div>
        </div>
    </div>
</form>

<!-- 密码找回 模态框（Modal） -->
<div class="modal fade" id="myModalAdd" tabindex="-10" role="dialog" aria-labelledby="myModalLabelAdd"
     aria-hidden="true" style="border: 0px solid red">
    <div class="modal-dialog" style="border: 0px solid red;margin-top: 120px; ">
        <div class="modal-content" style="border: 0px solid red; width: 60%;margin: auto;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h3 class="modal-title" id="myModalLabelAdd">
                    密码找回
                </h3>
            </div>
            <form id="defaultForm"
                  class="form-horizontal"
                  method="post" style="border: 0px solid red;">
                <div class="modal-body">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">账 号:</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="username" name="username"
                                   placeholder="" required/>
                            <p style="color:red;" id="errorUsername"></p>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮 箱:</label>
                        <div class="col-sm-5">
                            <input type="email" class="form-control" id="email" name="email"
                                   placeholder="" required/>
                            <p style="color:red;" id="errorEmail"></p>
                        </div>
                    </div>
                </div>
                <p id="infos"></p>
                <div class="modal-footer">
                    <button id="sendemail" type="button" class="btn btn-success" onclick="chckeSystem()">发送重置密码邮箱
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>

                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div><!-- /.end modal -->


<!-- loading -->
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
    <div class="modal-dialog" role="document" style="border: 0px solid red;width: 40%;margin-top: 160px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                发送中请稍后......
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                }, code: {
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                }
            }
        });
    });
</script>

</body>
<script type="text/javascript" src="<%=basePath%>js/bootstrap-3.3.6/dist/js/bootstrap.min.js" charset="utf-8"></script>
</html>
